import { useState, useEffect, useRef } from 'react';
import { TouchableHighlight, Modal, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, Dimensions, Animated, PanResponder, TextInput } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import { AntDesign } from '@expo/vector-icons';
import ActionButton from 'react-native-action-button';
import { Toast } from 'antd-mobile-rn';
import Swiper from 'react-native-swiper'
import { Entypo } from '@expo/vector-icons';
import axios from '../../api/axios';
import { List, Picker, DatePicker, InputItem } from 'antd-mobile-rn';
const data = require('@bang88/china-city-data')
import { useAuth } from '../../context/AuthProvider';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                padding: 2,
                ...style
            }
        }>
            <Text style={{ color: color, alignItems: 'center' }}>{children}</Text>
        </TouchableOpacity>
    )
}

const Address = ({ navigation }) => {
    const { user } = useAuth()
    const [city, setCity] = useState(user.city)
    const [phone, setPhone] = useState('');
    const [name, setName] = useState('')
    const [value, setValue] = useState([])
    const [label, setLabel] = useState()
    const [address, setAddress] = useState('')
    var lables = ""
    onChange = (value) => {
        setValue(value)
        console.log(value);
        // for(let i=0; data.length; i++){
        //     if(data[i].value == value[0]){
        //         for(let j=0; j< data[i].children.length; j++){
        //             if(data[i].children[j].value == value[1]){
        //                 for(let m=0; m< data[i].children[j].length; m++){
        //                     if(data[i].children[j].children[m].value == value[2]){
        //                         setLabel(data[i].label+data[i].children[j].label +data[i].children[j].children[m].label)
        //                         console.log(data[i].label+data[i].children[j].label +data[i].children[j].children[m].label);
        //                         console.log(label);
        //                         return
        //                     }
        //                 }
        //             }
        //         }
        //     }
        // }
    }
    const saveAddress = () => {
        var reg1 = new RegExp(" ","g"); // 加'g'，删除字符串里所有的"a"
        var str = phone.replace(reg1,"");
        if(checkModbile(phone)){
            axios.post('/userreceive/addaddress', { userid: user.userid, address: label + address, phone: str, name: name }).then(res=>{
                console.log(res);
                if(res.code == 200){
                    alert("添加成功")
                    navigation.navigate('address')
                }
            })
        } 
    }
    const checkModbile = (mobile) => {
        var re = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        var result = re.test(18833060066);
        console.log(result);
        console.log(11111);
        if (!result) {
            alert("手机号码格式不正确！");
            return false;//若手机号码格式不正确则返回false
        }
        return true;
    }
    return (
        <View style={{ alignItems: 'center', backgroundColor: '#fff', padding: '5%', height: '100%' }}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center', margin: 10 }}>
                <Text>收货人</Text>
                <TextInput onChangeText={text => setName(text)} placeholder='名字' style={{ borderRadius: 5, padding: 5, width: '80%', backgroundColor: '#f5f5f5' }}></TextInput>
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center', margin: 10 }}>
                <Text>手机号码</Text>
                <InputItem style={{width: '80%'}}
                    type="phone"
                    value={phone}
                    onChange={(value) => {
                        setPhone(value)
                    }}
                    placeholder="手机号">
                </InputItem>
                {/* <TextInput textContentType='telephoneNumber' keyboardType='numeric' onChangeText={text => setPhone(text)}
                    placeholder='手机号' style={{ borderRadius: 5, padding: 5, width: '80%', backgroundColor: '#f5f5f5' }}></TextInput> */}
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center', margin: 10 }}>
                <Text>所在地区</Text>
                <Picker itemStyle={{ color: '#5D5D5D', fontSize: 14 }}
                    data={data} useNativeDriver={true}
                    cols={3}
                    value={value}
                    format={(labels) => {
                        let kk = labels.join('')
                        setLabel(kk)
                        return kk
                    }}
                    onChange={this.onChange}>
                    <List.Item arrow="horizontal" style={styles.picker1} useNativeDriver={true} ></List.Item>
                </Picker>
                {/* <TextInput placeholder='名字' style={{ borderRadius: 5, padding: 5, width: '80%', backgroundColor: '#f5f5f5' }}></TextInput> */}
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center', margin: 10 }}>
                <Text>详细地址</Text>
                <TextInput placeholder='小区楼栋/乡村名称' style={{ borderRadius: 5, padding: 5, width: '80%', backgroundColor: '#f5f5f5' }} onChangeText={text => setAddress(text)}></TextInput>
            </View>
            <Btn onPress={saveAddress} style={{ width: '80%', backgroundColor: '#2eb2ff', padding: 5, borderRadius: 10, marginTop: '15%' }} color='#fff'>保存</Btn>
        </View>
    )
}
const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    },
    picker1: {
        height: 30,
        borderColor: 'gray',
        borderWidth: 1,
        width: Dimensions.get('window').width * 0.9,
        // width: 0.9*0.7*0.92*Dimensions.get('window').width,
        paddingLeft: 0,
        marginLeft: -Dimensions.get('window').width * 0.8,
        backgroundColor: 'rgba(247,247,246,0)',
        borderColor: 'rgba(247,247,246,0)',
        fontSize: 12
    },
});
export default Address